<template>
  <a-layout style="padding: 24px 0; background: #fff">
    <a-layout-sider style="background: #fff" width="200">
      <a-menu
        :default-open-keys="['sub2','sub3']"
        :default-selected-keys="['sub1']"
        mode="inline"
        style="height: 100%"
        @click="handleClick"
      >
        <template v-for="i in filterPersons">
          <a-menu-item v-if="i.single" :key="i.key">
            <a-icon :type="i.logo" style="margin-right: 14px" />
            <span>{{ i.name }}</span>
          </a-menu-item>
          <a-sub-menu v-if="!i.single" :key="i.key">
            <span slot="title"> <a-icon :type="i.logo" style="margin-left: 4px" /> {{ i.name }}</span>
            <a-menu-item v-for=" it in i.items" :key="it.key">
              {{ it.name }}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout-content :style="{ padding: '0 24px', minHeight: '560px' }">
      <Trend v-if="currentPage == 'sub' + (sort2.indexOf('指标趋势') + 1).toString()" />
      <comparativeAnalysis v-else-if="currentPage == 'sub' + (sort2.indexOf('对比分析') + 1).toString()" />
      <horizontal-bar-chart v-else-if="currentPage == '横向柱状图'" />
      <more-table v-else-if="currentPage == '“更多”表格'" />
      <yearAccumulated v-else-if="currentPage == 'sub' + (sort2.indexOf('当年累计数据') + 1).toString()" />
      <low-carbon-standards v-else-if="currentPage == '低碳标准'" />
      <demonstration-pilot v-else-if="currentPage == '低碳示范区'" />
      <show-data-cards v-else-if="currentPage == 'sub' + (sort2.indexOf('碳交易') + 1).toString()" />
      <map-data v-else-if="currentPage == 'sub' + (sort2.indexOf('地图数据') + 1).toString()" />
    </a-layout-content>
  </a-layout>
</template>

<script>
import Trend from './components/trend.vue'
import comparativeAnalysis from './components/comparativeAnalysis.vue'
import YearAccumulated from '@views/dataVisualization/components/yearAccumulated'
import LowCarbonStandards from '@views/dataVisualization/components/lowCarbonStandards'
import DemonstrationPilot from '@views/dataVisualization/components/demonstrationPilot'
import ShowDataCards from '@views/dataVisualization/components/showDataCards'
import MapData from '@views/dataVisualization/components/mapData'
import TargetTracking from '@views/dataVisualization/components/targetTracking'
import MoreTable from '@views/dataVisualization/components/moreTable'
import HorizontalBarChart from '@views/dataVisualization/components/horizontalBarChart'

const sort = ['指标趋势', '目标跟踪', '示范试点', '当年累计数据', '地图数据', '对比分析','碳交易']
// 侧边栏排序，左边数组的从左至右对应侧边栏从上至下

export default {
  components: {
    HorizontalBarChart,
    MoreTable,
    TargetTracking,
    MapData,
    ShowDataCards,
    DemonstrationPilot,
    LowCarbonStandards,
    YearAccumulated,
    Trend,
    comparativeAnalysis
  },
  data() {
    return {
      sort2: sort,
      currentPage: 'sub' + (sort.indexOf('指标趋势') + 1).toString(),
      collapsed: false,
      list: [
        {
          name: '指标趋势',
          key: 'sub' + (sort.indexOf('指标趋势') + 1).toString(),
          logo: 'control',
          single: true
        },
        {
          name: '当年累计数据',
          key: 'sub' + (sort.indexOf('当年累计数据') + 1).toString(),
          logo: 'control',
          single: true
        },
        {
          name: '目标跟踪',
          key: 'sub' + (sort.indexOf('目标跟踪') + 1).toString(),
          logo: 'bar-chart',
          single: false,
          items: [
            {
              name: '横向柱状图',
              key: '横向柱状图'
            },
            {
              name: '“更多”表格',
              key: '“更多”表格'
            }
          ]
        },
        {
          name: '示范试点',
          key: 'sub' + (sort.indexOf('示范试点') + 1).toString(),
          logo: 'build',
          single: false,
          items: [
            {
              name: '全国/本市低碳标准',
              key: '低碳标准'
            },
            {
              name: '低碳示范区',
              key: '低碳示范区'
            }
          ]
        },
        {
          name: '对比分析',
          key: 'sub' + (sort.indexOf('对比分析') + 1).toString(),
          logo: 'font-colors',
          single: true
        },{
          name: '碳交易',
          key: 'sub' + (sort.indexOf('碳交易') + 1).toString(),
          logo: 'font-colors',
          single: true
        },
        {
          name: '地图数据',
          key: 'sub' + (sort.indexOf('地图数据') + 1).toString(),
          logo: 'tool',
          single: true
        }
      ]
    }
  },
  computed: {
    filterPersons() {
      // 1. 得到依赖数据
      const { list } = this

      // 2. 进行计算处理, 产生结果数据并返回
      // 过滤
      const arr = list.filter(p => p.key)

      arr.sort((a, b) => {
        //  截取最后一个字母之后的字符串
        const aLast = a.key.slice(3)
        const bLast = b.key.slice(3)
        return aLast - bLast
      })

      return arr
    }
  },
  methods: {
    //路由内容切换
    changeMenu(route) {
      console.log(route)
      //获取路由对象并切换
      this.$router.push(route)
    },
    handleClick(item) {
      this.currentPage = item.key
    }
  }
}
</script>

<style lang="stylus" scoped>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}

/deep/ .ant-menu-sub.ant-menu-inline {
  background-color: #FAFAFA !important;
}

/deep/ .ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title {
  width: calc(96% + 1px) !important;
  margin-left: 2%;
}

/deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  border-radius 8px
  background-color: #E6F7FF !important;
}

/deep/ .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
  border: none !important;
}
</style>

